<template>
	<view class="" style="width: 100%; box-sizing: border-box;">
		<!-- <view class="item"> -->
			<view class="cont_li" style="display: flex;margin: 15px 0px;">
				<image style="width: 30rpx;height: 35rpx;margin: 5px 0px;" src="/static/img/ljlc/yd.png" mode=""></image>
				<view style="color: #fff;margin: 0 10px;" class="cont_li_label">运单编号:</view>
				<view  style="color: #fff;" class="cont_li_value">{{infoData.billNo}} </view>
			</view>
			<view class="top_hw" v-for="(ele,i) in infoData.exIntegrity">
				<view class="top_tle">
				<view class="top_left">
					<!-- <image style="width: 37rpx;height: 37rpx;margin: 5px 5px;" src="/static/img/ljlc/car.png" mode=""></image> -->
					
					<text style="color: #168EEC;font-size: 12px;">附件{{ele.orderNumber}}</text>
				</view>	
				<view class="top_right">
					
					<view class="zxhlx" >{{ele.transType}}</view>
					
				</view>	
				</view>
				<view style="display: flex;margin-top: 30rpx;">
					<view class="">
						<view class="q">
							起
						</view>
						<view class="limsx">
							
						</view>
						<view class="z">
							止
						</view>
					</view>
					<view style="margin-left: 10px;">
						<view class="">
							<view class="txt">
								{{ele.shipperAddress}}
							</view>
							<!-- <view class="rq">
								起运日期：{{infoData.loadingDate}}
							</view> -->
						</view>
						<view style="margin-top: 33px;">
							<view class="txt">
								{{ele.consigneeAddress}}
							</view>
							<!-- <view class="rq">
								预计到达日期：{{infoData.unloadingDate}}
							</view> -->
						</view>
					</view>
				</view>
				<view class="hwbox">
					<view class="hwtle">
						货物信息
					</view>
					<view class="wz" style="z-index: 9 !important;" >
						<view style="overflow: auto;max-height: 269rpx;">{{ele.goodsInfo}}</view>
						
					
					</view>
					<view class="hwtb"  >
						<!-- <image style="width: 144rpx;height: 139rpx;" src="/static/img/ljlc/hw_img.png" mode=""></image> -->
					</view>
					
				</view>
				<view class="xiana"></view>
				<view class="item" style="padding: 0;margin-top: 20px;">
					
					<view class="item_cont" style="padding-left: 0;">
						<view class="item_top">
							<view class="item_title">托运人</view>
						</view>
						<view class="cont_li">
							<view class="cont_li_label">名称:</view>
							<view class="cont_li_value">{{ele.consignorName}}</view>
						</view>
						<view class="cont_li">
							<view class="cont_li_label">联系电话:</view>
							<view class="cont_li_value">{{ele.consignorPhone}}</view>
						</view>
					</view>
				</view>
				
				<!--  -->
				<view class="xian"></view>
				<view class="item" style="padding: 0;">
					<!-- <view class="black_bar"></view> -->
				
					<view class="item_cont" style="padding-left: 0;">
						<view class="item_top">
							<view class="item_title">装货人</view>
						</view>
						<view class="cont_li">
							<view class="cont_li_label">名称:</view>
							<view class="cont_li_value">{{ele.shipperName}}</view>
						</view>
						<view class="cont_li">
							<view class="cont_li_label">联系电话:</view>
							<view class="cont_li_value">{{ele.shipperPhone}}</view>
						</view>
					</view>
				</view>
				<!--  -->
				<view class="xian"></view>
				<view class="item" style="padding: 0;">
					<!-- <view class="black_bar"></view> -->
					
					<view class="item_cont" style="padding-left: 0;">
						<view class="item_top">
							<view class="item_title">收货人</view>
						</view>
						<view class="cont_li">
							<view class="cont_li_label">名称:</view>
							<view class="cont_li_value">{{ele.consigneeName}}</view>
						</view>
						<view class="cont_li">
							<view class="cont_li_label">联系电话:</view>
							<view class="cont_li_value">{{ele.consigneePhone}}</view>
						</view>
				
					</view>
				</view>
			</view>
		
		
		
	
	</view>
</template>

<script>
	import {
		getBillInfo,
		getFirBillInfo
	} from '@/common/api/monitor.js'
	export default {
		data() {
			return {
				infoData: {},
				queryData: null,
				isString: "",
				gInfo: []
			};
		},
		mounted() {
			this.infoData = this.$store.state.roadCheckInfo
			
		console.log(this.infoData,5556)
		

		},
		// onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		// 	console.log('传递的参数', option);
		// 	this.queryData = option
		// },
		methods: {
			// getBillInfo(params) {
			// 	getBillInfo(params).then(res => {
			// 		console.log(res, '电子运单信息');
			// 		this.infoData = res.data.data
			// 	})
			// },
			// //车牌号车牌颜色查询
			// getFirBillInfo(params){
			// 	getFirBillInfo(params).then(res => {
			// 		console.log(res, '电子运单信息');
			// 		this.infoData = res.data.data
			// 	})
			// }
		},
	}
</script>

<style lang="scss">
	.carys{ //黄
		width: 40rpx;
		height: 40rpx;
		background: #EFD400;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
	}
	.carys1{ //蓝
		width: 40rpx;
		height: 40rpx;
		background: #168EEC;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
	}
	.carys2{ //黑
		width: 40rpx;
		height: 40rpx;
		background: #21231e;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
	}
	.carys3{ //白
		width: 40rpx;
		height: 40rpx;
		background: #fff;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
	}
	.carys4{ //绿
		width: 40rpx;
		height: 40rpx;
		background: #1a9e34;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
	}
	.top_hw{
		width: 692rpx;
		// height: 737rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 15px;
		box-sizing: border-box;
		margin-top: 10px;
       .top_tle{
		   display: flex;
		   justify-content: space-between;
		   .top_left{
			     display: flex;
			   width: 156rpx;
			   height: 58rpx;
			   line-height: 58rpx;
			   background: linear-gradient( 270deg, rgba(22,142,236,0) 0%, rgba(22,142,236,0.3) 100%);
			   border-radius: 7rpx;
			   // .aa{
				  //  transform: translateY(-10px);
			   // }
		   }
		   .top_right{
			  width: 130rpx;
			  height: 58rpx;
			  background: #F0F7FF;
			  border-radius: 181rpx 0rpx 0rpx 181rpx;
			  transform: translateX(15px);
		   }
		   .zxhlx{
			   width: 101rpx;
			   height: 36rpx;
			   font-family: PingFangSC, PingFang SC;
			   font-weight: 400;
			   font-size: 25rpx;
			   color: #007AFF;
			   line-height: 36rpx;
			   // text-align: left;
			   font-style: normal;
			   padding: 5px 8px;
		   }
	   }
	   .limsx{
		   width: 0rpx;
		   height: 61rpx;
		   border: 2rpx dashed  #4D6CA9;
		       margin-left: 7px;
	   }
	   .q{
		   width: 40rpx;
		   height: 40rpx;
		   background: #168EEC;
		   border-radius: 7rpx;
		    color: #fff;
			text-align: center;
			line-height: 40rpx;
			font-size: 25rpx;
	   }
	   .z{
		  width: 40rpx;
		  height: 40rpx;
		  background: #B5B9C2;
		  border-radius: 7rpx; 
		  color: #fff;
		  text-align: center;
		  line-height: 40rpx;
		  font-size: 25rpx;
	   }
	   .txt{
		   width: 100%;
		   // height: 40rpx;
		   font-family: PingFangSC, PingFang SC;
		   font-weight: 500;
		   font-size: 29rpx;
		   color: #333333;
		   line-height: 40rpx;
		   text-align: left;
		   font-style: normal;
	   }
	   .rq{
		   width: 370rpx;
		   height: 36rpx;
		   font-family: PingFangSC, PingFang SC;
		   font-weight: 400;
		   font-size: 25rpx;
		   color: #999999;
		   line-height: 36rpx;
		   text-align: left;
		   font-style: normal;
	   }
	   .hwbox{
		   width: 632rpx;
		   height: 121px;
		   background: rgba(22,142,236,0.05);
		   border-radius: 7rpx;
		   margin-top: 20rpx;
		       padding: 10px;
		       box-sizing: border-box;
			   position:relative;
			
		   .hwtle{
			   width: 116rpx;
			   height: 40rpx;
			   font-family: PingFangSC, PingFang SC;
			   font-weight: 500;
			   font-size: 29rpx;
			   color: #168EEC;
			   line-height: 40rpx;
			   text-align: left;
			   font-style: normal;
			   // margin: 20rpx;
		   }
		   .wz{
			    position: absolute; 
				
		   }
		   .hwtb{
			   width: 144rpx;
			   height: 139rpx;
			   position: absolute;
			   right: 13px;
			       top: 32px;
				   background: url(/static/img/ljlc/hw_img.png) no-repeat;
				   			background-size: 100% 100%;
			   
		   }
	   }
	}
	.item_top {
		width: 107rpx;
		height: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 29rpx;
		color: #168EEC;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		
	}
.item{
	width: 100%;
	height: 250rpx;
	background: #FFFFFF;
	border-radius: 18rpx;
	padding: 10px;
	box-sizing: border-box;
	// margin-top: 15px;
}
.item_title{
	width: 132rpx;
}
	.item_cont {
		width: calc(100% - 40rpx);
		display: flex;
		flex-wrap: wrap;
		padding: 16rpx 20rpx;
		color: #666666;
		font-size: 28rpx;
		background: #fff;
    box-sizing: border-box;
		.cont_li {
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			// justify-content: space-between;
			justify-content: space-between;
			flex-wrap: wrap;
			box-sizing: border-box;

			// .cont_li_label {
			// 	// width: 256rpx;
			// }

			// .cont_li_value {
			// 	// flex: 1;
			// }
		}
	}

	// .black_bar {
	// 	width: 100%;
	// 	height: 20rpx;
	// 	background: #F5F5F5;
	// }
	.itemz{
		width: 692rpx;
		height: 1627rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 10px;
		box-sizing: border-box;
		margin-top: 15px;
		box-sizing: border-box;
	}
	.xian{
		width: 636rpx;
		height: 0rpx;
		border: 2rpx dashed #F1F1F1;
		// margin-bottom: 10rpx;
		transform: translateY(-10px);
	}
	.xiana{
		width: 636rpx;
		height: 0rpx;
		border: 2rpx dashed #F1F1F1;
		// margin-bottom: 10rpx;
		transform: translateY(15px);
	}
</style>